<template>
  <div style="height:100%;width:100%;position:relative;">
      <div :style="'bottom:'+autopartsize+addautopartstyle" class="autopart">
          <slot></slot>
      </div>
      <div :style="'bottom:'+fixpartsize+'background-color:'+splitcolor+';height:'+splitwidth+'px;'" class="splitpart"></div>
      <div :style="'bottom:'+movesplit+'background-color:'+movesplitcolor+';height:'+splitwidth+'px;cursor:'+getCursor()" @mousedown="splitmousedown" class="splitpartmove"></div>
      <div :style="'height:'+fixpartsize+addfixstyle" class="fixedpart">
          <slot name="fix"></slot>
      </div>
  </div>
</template>

<script type="text/javascript">
export default {
  props: {
      addautopartstyle: { type: String },
      addfixstyle: { type: String },
      fixsize: { type: Number | String, default: 40 },
      minfixsize: { type: Number, default: 20 },
      maxfixsize: { type: Number, default: 0 },
      splitwidth: { type: Number, default: 3 },
      splitcolor: { type: String, default: "#ffffff" },
      movingcolor: { type: String, default: "#bbbbbb" },
      canDrag: { type: Boolean, default: true },
      id: { type: String, default: "" },
      rememberConfig: { type: Boolean, default: true },
  },
  data() {
      return {
          fixsizeLocal: 40,
          splitsizeLocal: 40,
          movesplitcolor: "",
      };
  },
  mounted() {
      this.fixsizeLocal = this.fixsize;
      if (this.rememberConfig) {
          var RecSize = this.$tool.getLocalConfig("LayoutRec_" + this.RecID);
          if (RecSize) this.fixsizeLocal = RecSize;
      }
      this.splitsizeLocal = this.fixsizeLocal;
  },
  methods: {
      splitmousedown(ev) {
          if (!this.canDrag) return;
          let that = this;
          let el = ev.target;
          var disY = ev.clientY - el.offsetTop;
          this.movesplitcolor = this.movingcolor;
          document.body.onselectstart = document.body.ondrag = function () {
              return false;
          };
          document.onmousemove = function (ev) {
              var bh = ev.clientY - disY;
              let l = el.parentElement.clientHeight - bh - that.splitwidth;
              that.splitsizeLocal = l;
          };
          document.onmouseup = function () {
              that.movesplitcolor = "";

              let l = that.splitsizeLocal;
              if (l > that.$el.clientHeight - that.splitwidth - that.minfixsize) l = that.$el.clientHeight - that.splitwidth - that.minfixsize;
              if (that.maxfixsize > 0 && l > that.maxfixsize) l = that.maxfixsize;
              if (l < that.minfixsize) l = that.minfixsize;

              that.splitsizeLocal = l;
              that.fixsizeLocal = l;

              that.$tool.setLocalConfig("LayoutRec_" + that.RecID, that.fixsizeLocal);

              document.onmousemove = null;
              document.onmouseup = null;
              document.body.onselectstart = null;
              document.body.ondrag = null;

              that.$nextTick(() => {
                  that.$emit("Resized", {
                      t: "bottom",
                      f: that.fixsizeLocal,
                      a: that.$el.clientHeight - that.fixsizeLocal - that.splitwidth,
                  });
              });
          };
      },
      getCursor() {
          if (this.canDrag) return "row-resize";
          else return "";
      },
  },
  computed: {
      RecID() {
          if (this.id) {
              return this.id;
          } else {
              let tempobj = this;
              let mypath = "lbottom_" + global.location.hash;
              while (tempobj.$parent) {
                  mypath = mypath + "_" + tempobj.$parent.$children.indexOf(tempobj);
                  tempobj = tempobj.$parent;
              }
              return mypath;
          }
      },
      autopartsize() {
          if (this.fixsizeLocal.indexOf && this.fixsizeLocal.indexOf("%") >= 0) {
              return "calc( " + this.fixsizeLocal + " + " + this.splitwidth + "px );";
          } else {
              let tempnum = this.fixsizeLocal + this.splitwidth;
              return tempnum + "px;";
          }
      },
      fixpartsize() {
          if (this.fixsizeLocal.indexOf && this.fixsizeLocal.indexOf("%") >= 0) {
              return this.fixsizeLocal + ";";
          } else {
              return this.fixsizeLocal + "px;";
          }
      },
      movesplit() {
          if (this.splitsizeLocal.indexOf && this.splitsizeLocal.indexOf("%") >= 0) {
              return this.splitsizeLocal + ";";
          } else {
              return this.splitsizeLocal + "px;";
          }
      },
  },
};
</script>

<style scoped>
.fixedpart {
  position: absolute;
  width: 100%;
  bottom: 0px;
  overflow: auto;
}
.autopart {
  position: absolute;
  width: 100%;
  top: 0;
  overflow: auto;
}
.splitpart {
  width: 100%;
  position: absolute;
  z-index: 98;
}
.splitpartmove {
  width: 100%;
  position: absolute;
  z-index: 99;
}
</style>
